<template>
  <div class="product">
    <div class="tab">
      <van-tabs
        :active="active"
        line-width="24"
        line-height="3"
        :border="false"
        color="#187798"
        sticky
        animated
        @change="tabChange"
      >
        <van-tab :title="item" @name="item" v-for="(item,index) in tabList" :key="index">
          <!-- 内容 -->
          <div class="content" v-if="list.length>0">
            <div class="mainBody" v-for="(e,j) in list" :key="j" @click="handleJump(e)">
              <div class="flex">
                <div class="icon">
                  <span>{{e.productAudit==='RAISING'?"募集中":(e.productAudit==='CLOSE_ACCOUNT'||e.productAudit==='SET_UP'||e.productAudit==='IN_COLLECTION')?"回款中":e.productAudit==='REMOVE_RACK'?"已下架":"已完成"}}</span>
                  <!-- <span>{{activeIndex===0?"全部":activeIndex===1?"募集中":activeIndex===2?"汇款中":"已完成"}}</span> -->
                </div>
                <span style="color:#909292;font-size:12px">{{e.productNo}}</span>
              </div>
              <div class="flex">
                <div style="width:60%">
                  <div class="name ellipsis">{{e.productName}}</div>
                  <div class="flex ellipsis">
                    <p class="label">{{e.classifyName}}</p>
                    <p class="label" v-if="e.startingAmount">{{e.startingAmount}}万元起投</p>
                  </div>
                </div>
                <div class="right">
                  <div v-if="e.baseComparison">
                    <div class="percent" v-if="e.baseComparison.length===1">
                      <span v-if="e.baseComparison[0].prop==='0'">浮动</span>
                      <span v-else>{{e.baseComparison[0].prop}}%</span>
                    </div>
                    <div class="percent" v-if="e.baseComparison.length>1">
                      <span
                        v-if="e.baseComparison[0].prop==='0' && e.baseComparison[e.baseComparison.length-1].prop==='0'"
                      >浮动</span>
                      <span
                        v-else
                      >{{e.baseComparison[0].prop}}%~{{e.baseComparison[e.baseComparison.length-1].prop}}%</span>
                    </div>
                  </div>
                  <div class="month" v-if="e.raisingPeriod">{{e.raisingPeriod}}个月</div>
                </div>
                <!-- <div class="right">
                  <div
                    v-if="e.baseComparison"
                    class="percent"
                  >{{e.baseComparison[0].prop}}%~{{e.baseComparison[e.baseComparison.length-1].prop}}%</div>
                  <div class="month" v-if="e.raisingPeriod">{{e.raisingPeriod}}个月</div>
                </div>-->
              </div>
            </div>
            <div class="activeMore" v-if="!loadMore && list.length>0">—— 已经到底啦 ——</div>
          </div>
          <!-- 无数据 -->
          <div class="empty" v-if="!loadMore && list.length===0">
            <div style="text-align:center">
              <img class="emptyIcon" src="/static/images/manage/empty.png" alt />
              <p style="font-size:14px;color:#909292">您当前暂无产品</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <!-- <div
        v-for="(item, index) in tabList"
        :key="index"
        class="flex-1"
        :class="index===type?'tab_change':'tab_item'"
        @click="handleType(index)"
      >
        <span>{{ item }}</span>
        <p v-show="index == type" class="tab_border"></p>
      </div>-->
    </div>
  </div>
</template>
<script>
import { productOrderPage } from "@/api/api";
export default {
  data() {
    return {
      active: 0,
      list: [],
      activeIndex: 0,
      showType: false,
      // 列表分页
      formData: {
        pageIndex: 1,
        pageSize: 10,
        audit: ""
      },
      loadMore: true,
      // type: 0,
      tabList: ["全部", "募集中", "回款中", "已完成"]
    };
  },
  onShow() {
    //  Object.assign(this.$data, this.$options.data());
    this.loadMore = true;
    Object.assign(this.$data, this.$options.data());
    this.productOrderPage();
  },
  // 上拉加载更多
  onReachBottom() {
    this.productOrderPage();
  },
  // RAISING.募集中,COMPLETE.已完成,IN_COLLECTION.回款中
  methods: {
    /** 产品分页 */
    async productOrderPage() {
      if (this.loadMore) {
        wx.showLoading({
          title: "加载中",
          duration: 1000
        });
        await productOrderPage(this.formData).then(res => {
          wx.hideLoading();
          if (!res.code) {
            var data = res.list;
            this.list = this.list.concat(data);
            ++this.formData.pageIndex;
            if (res.pages < this.formData.pageIndex) {
              this.loadMore = false;
            }
          }
        });
      }
    },
    // tabList切换
    tabChange(event) {
      this.list = [];
      let _index = event.target.index;
      // this.active = event.target.index;
      this.loadMore = true;
      this.formData.pageIndex = 1;
      console.log(event);
      switch (_index) {
        case 0: // 我的产品
          this.formData.audit = "";
          break;
        case 1: // 我的产品
          this.formData.audit = "RAISING";
          break;
        case 2:
          this.formData.audit = "IN_COLLECTION";
          break;
        default:
          this.formData.audit = "COMPLETE";
          break;
      }
      this.productOrderPage();
    },

    /** 跳转 */
    handleJump(e) {
      console.log(e);
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/productDetail/main?id=${
          e.id
        }&productId=${e.productId}&detailType=2`
      });
    }
  }
};
</script>
<style lang="less" scoped>
.product {
  .emptyIcon {
    width: 229px;
    height: 175px;
    margin: 90px 0 40px;
  }
  .van-ellipsis {
    font-size: 13px;
    color: #909292;
  }
  .van-tab--active {
    font-size: 16px !important;
    color: #187798 !important;
  }
  .tab {
    width: 100%;
    height: 44px;
    width: 100%;
    background: #fff;
    z-index: 1;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
    .tab_item {
      text-align: center;
      font-size: 13px;
      color: #909292;
      // height: 48px;
      // line-height: 48px;
    }

    // .tab_change {
    //   text-align: center;
    //   font-size: 16px;
    //   color: #187798;
    //   font-weight: bold;
    //   // line-height: 48px;
    //   // height: 48px;
    // }
    .tab_border {
      width: 24px;
      height: 3px;
      margin: auto;
      // position: absolute;
      // bottom: 0;
      // margin-top: 13px;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
    }
  }
  .content {
    padding: 0 15px 15px 15px;
    .right {
      border-left: 1px solid #e6e7e3;
      width: 40%;
      text-align: center;
    }

    .mainBody {
      padding: 20px 0;
      border-bottom: 0.5px solid #e6e6e6;
    }
    .percent {
      font-size: 22px;
      color: #f45247;
      font-weight: bold;
    }
    .month {
      font-size: 12px;
      color: #909292;
      margin-top: 6px;
    }
    .name {
      padding-right: 24px;
      margin: 6px 0 10px 0;
      font-size: 16px;
      font-weight: bold;
      color: #020604;
    }
    .label {
      padding: 2px 10px;
      background: #f3f7f8;
      border-radius: 2px;
      color: #187798;
      font-size: 12px;
      margin-right: 5px;
    }
    .icon {
      width: 51px;
      height: 20px;
      font-size: 10px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/collect.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      span {
        color: #fff;
        margin-left: -5px;
      }

      // background-size: 100% 100%;
    }
  }
}
</style>